<template>
  <div class="mapview-main">
    <div id="amap"></div>
  </div>
</template>

<style lang="scss" scoped>
.BMap_cpyCtrl {
  display: none;
}
.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("../assets/bg.png") repeat;

  .mapview-main-border {
    position: relative;
    top: 0;
    background: url("../assets/bgBorder.png") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
#amap {
  width: 100%;
  height: 100%;
  .amap-maps {
    background: #fff;
    .amap-layers {
      .amap-markers {
        .amap-marker {
          .amap-marker-label {
            width: 60px;
            font-size: 16px;
            line-height: 18px;
            text-align: center;
            height: 28px;
            font-family: STLiti;
            color: green;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.4);
            border: solid 2px rgba(100, 255, 200, 0.8);
          }
        }
      }
    }
  }
}
</style>
<script>
import BMapGL from "BMapGL";
import BMAP_ANCHOR_TOP_LEFT from "BMAP_ANCHOR_TOP_LEFT";
import BMAP_NAVIGATION_CONTROL_LARGE from "BMAP_NAVIGATION_CONTROL_LARGE";
// eslint-disable-next-line no-unused-vars
import { effect, util, mapvgl, mapvglThree } from "vue-mapvgl";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from "vuex";
export default {
  name: "AMap",
  data() {
    return {
      store: useStore(), //此处初始化store对象
      massMarks: {},
      map: null,
      chongqing: [
        [
          19,
          1200,
          120.863422,
          32.015922,
          120.863422,
          -1800,
          -2560,
          960,
          -720,
          400,
          560,
          1040,
          -800,
          1440,
          2040,
          -2040,
          1480
        ],
        [
          39,
          23168,
          6692,
          71760,
          10760,
          -7480,
          -40,
          0,
          -2400,
          1640,
          0,
          0,
          -840,
          2240,
          0,
          0,
          -360,
          2880,
          0,
          0,
          1560,
          720,
          0,
          0,
          2080
        ],
        [
          24,
          23168,
          6692,
          78640,
          102400,
          -880,
          0,
          -680,
          -720,
          -2480,
          -720,
          0,
          -720,
          560,
          40,
          2200,
          800,
          1280,
          1320
        ],
        [
          28,
          23168,
          6692,
          98520,
          72680,
          -3960,
          -1440,
          440,
          -1200,
          3960,
          1440,
          -440,
          1200
        ],
        [
          27,
          23168,
          6692,
          0,
          10200,
          0,
          -2720,
          80,
          -40,
          -80,
          -200,
          0,
          -3320,
          1760,
          3880,
          -1280,
          600,
          600,
          1280,
          -1080,
          520
        ],
        [
          6,
          23168,
          6692,
          51760,
          84400,
          -2280,
          -1440,
          2200,
          -3600,
          1880,
          1160,
          -1480,
          2440,
          400,
          240,
          -720,
          1200
        ]
      ],
      allData: [],
      barData: [
        {
          geometry: {
            type: "Point",
            coordinates: [120.863422, 32.015922]
          },
          properties: {
            count: 168
          }
        }
      ],
      grid: []
    };
  },
  mounted() {
    this.allData = this.store.getters.getCompanys || [];
    this.initBMap();
    // this.toFrames();
  },
  methods: {
    initBMap() {
      this.map = new BMapGL.Map("amap");
      // this.map.bgColor = "#404a59"; // 画布背景色
      this.map.trafficVisible = true; // 设置是否显示交通流量图层
      this.map.skyColors = [
        // 地面颜色
        "rgba(226, 237, 248, 0)",
        // 天空颜色
        "rgba(186, 211, 252, 1)"
      ];
      var cityName = "崇川区";
      this.map.tilt = 60;

      this.map.centerAndZoom(cityName, 18); // 初始化地图,设置中心点坐标和地图级别。    this.map.addControl(new Bthis.Map.ScaleControl());
      this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      // 添加比例尺控件
      // map.enableScrollWheelZoom();

      var mapview = new mapvgl.View({
        effects: [new mapvgl.BlurEffect()],
        map: this.map
      });
      // let res = {
      //   max: 300, // 最大阈值
      //   min: 10, // 最小阈值
      //   maxHeight: 300, // 最大高度
      //   minHeight: 2, // 最小高度
      //   gridSize: 3, // 柱状图单个柱子的半径
      //   style: "normal", // grid，默认值，按半径聚合展示 normal，按真实坐标展示
      //   riseTime: 1000, // 楼块初始化升起时间
      //   gradient: {
      //     // 各阶段渐变色(0-1)
      //     0.0: "rgb(50, 50, 256)",
      //     0.1: "rgb(50, 250, 56)",
      //     0.5: "rgb(250, 250, 56)",
      //     1.0: "rgb(250, 50, 56)"
      //   }
      // };
      // this.grid = new mapvgl.HeatGridLayer(res); // 创建热力图图层
      this.map.addControl(
        new BMapGL.NavigationControl({
          type: BMAP_NAVIGATION_CONTROL_LARGE,
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: new BMapGL.Size(40, 250)
        })
      );
      // 刪除路網與樓名
      this.map.setMapStyleV2({
        styleId:"bd6da0b6c11f08e4b22e42e0017ce137"
      });
      //建築
      var polygons = this.getPolygons();
      var shapeLayer = new mapvgl.ShapeLayer({
        color: "rgba(194, 147, 75, 0.8)", // 柱状图颜色
        enablePicked: true, // 是否可以拾取
        selectedIndex: -1, // 选中项
        selectedColor: "#ee1111", // 选中项颜色
        autoSelect: true, // 根据鼠标位置来自动设置选中项
        onClick: e => {
          // 点击事件
          console.log(e);
        }
      });
      var bdary = new BMapGL.Boundary();
      var thatMap = this.map;
      bdary.get(cityName, function(rs) {
        //获取行政区域
        thatMap.clearOverlays(); //清除地图覆盖物

        //for循环都删除掉了，只剩下这个
        //网上查了下，东西经南北纬的范围
        var ply1 = new BMapGL.Polygon(
          rs.boundaries[0],
          {
            strokeColor: "none",
            fillColor: "none",
            fillOpacity: 1,
            strokeOpacity: 1
          }
        ); //建立多边形覆盖物

        thatMap.addOverlay(ply1);
        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMapGL.Polygon(rs.boundaries[0], {
          strokeWeight: 2,
          strokeColor: "#00f",
          fillColor: ""
        });
        thatMap.addOverlay(ply);
        //map.setViewport(ply.getPath());    //调整视野
      });
      mapview.addLayer(shapeLayer);
      mapview.addLayer(this.grid);
      shapeLayer.setData(polygons);
      this.barData = this.getBarData();
      this.grid.setData(this.barData);
      this.map.setDefaultCursor("default");
    },
    getPolygons() {
      var polygons = [];
      for (var i = 0; i < this.chongqing.length; i++) {
        // var line = this.allData[i].value.split(",");
        var line = this.chongqing[i];
        var polygon = [];
        var pt = [line[1], line[2]];
        for (var j = 3; j < line.length; j += 2) {
          pt[0] += line[j] / 100 / 2;
          pt[1] += line[j + 1] / 100 / 2;
          polygon.push([pt[0], pt[1]]);
        }
        polygons.push({
          geometry: {
            type: "Polygon",
            coordinates: [polygon]
          },
          properties: {
            height: line[0] / 2
          }
        });
      }
      console.log("polygons:", polygons);
      return polygons;
    },
    /**
     * 旋转地图动画
     */
    toFrames() {
      let keyFrames = [
        // 定义关键帧
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 0,
          percentage: 0
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 36,
          percentage: 0.1
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 72,
          percentage: 0.2
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 108,
          percentage: 0.3
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 60,
          heading: 144,
          percentage: 0.4
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 180,
          percentage: 0.5
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 60,
          heading: 216,
          percentage: 0.6
        }        
      ];
      let opts = {
        duration: 25000, // 花费时间
        delay: 80, // 延迟
        interation: 1 // 循环, 可设置数字为次数
      };
      let animation = new BMapGL.ViewAnimation(keyFrames, opts); // 创建视角动画
      this.map.startViewAnimation(animation); // 开始动画
    },
     /**
     * 返回柱狀
     */
    getBarData() {
      let barData = [];
      for (let i = 0; i < this.allData.length; i++) {
        const teg = this.allData[i];
        let obj = {
          geometry: {
            type: "Point",
            coordinates: teg.value.split(",")
          },
          properties: {
            count: Math.random() * 500
          }
        }
        barData.push(obj);
      }
      return barData;
    }
  }
};
</script>
